import React, {useReducer, useState} from 'react'

//处理函数
//第一个参数老的状态,第二个参数数传过来的对象
const reducer = (prevState, action) => {
    console.log('prevState', prevState)
    console.log('action', action)
    let newState = {...prevState}
    switch (action.type) {
        case 'hhh-low':
            newState.count--
            return newState
        case 'hhh-add':
            newState.count++
            return newState
        default:
            return false
    }
}

//定义在外部的状态,的一个对象
const intialState = {
    count: 0,
    list: [1, 2, 3, 4, 5]
}

export default function App() {

    //reducer:专门在外面好管理状态的函数
    //intialState:外部初始状态值
    //state:拿到的就是intialState的状态值
    //dispatch:好改变这个状态的唯一方法
    const [state, dispatch] = useReducer(reducer, intialState)

    return (
        <div>
            <button onClick={() => {
                dispatch({
                    type: 'hhh-low'
                })
            }}>-
            </button>
            {state.count}
            <button onClick={() => {
                dispatch({
                    type: 'hhh-add'
                })
            }}>+
            </button>
        </div>
    )
}
